<template>
    <span :class="bgColor">
        {{ theTimeContent }}
    </span>
</template>

<script>
    export default {
        data(){
            return{
                theTimeContent: '',
                bgColor: 'yellowNg'
            }
        },
        props: {
            startTime: {
                type: Date
            },
            endTime: {
                type: String
            },
            endText: {
                type: String
            }
        },
        mounted(){
            this.countDown(this.startTime, this.endTime)
        },
        methods:{
            countDown(startTime, endTime){
                let self = this;
                let nowtime = Date.parse(startTime);
                let endtime = Date.parse(endTime);
                let cuttime = endtime-nowtime;
                let timer = setInterval(function(){
                    cuttime -= 1000;
                    const day = parseInt(cuttime / (1000 * 24 * 60 * 60));
                    const hour = parseInt((cuttime % (1000 * 24 * 60 * 60)) / (1000 * 60 * 60));
                    const minute = parseInt(((cuttime % (1000 * 24 * 60 * 60)) % (1000 * 60 * 60)) / (1000 * 60));
                    const second = parseInt((((cuttime % (1000 * 24 * 60 * 60)) % (1000 * 60 * 60)) % (1000 * 60)) / 1000);

                    let a = `${day*24+hour}`;
                    let b = `${minute}`;
                    let c = `${second}`;

                    if(day*24+hour<10){
                         a = `0${day*24+hour}`
                    }
                    if(minute<10){
                        b = `0${minute}`
                    }
                    if(second<10){
                        c = `0${second}`
                    }

                    if(cuttime>0){
                        self.theTimeContent = `${a}:${b}:${c}`
                    }else{
                        clearInterval(timer);
                        self.theTimeContent = self.endText
                        self.bgColor = 'orangeBg'
                    }
                },1000);
            }
        }
    }
</script>
